<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
        }
        .span_relative{
            position: relative;
            width: 300px;
            height: 35px;
            padding: 60px;
            margin: 30px;
            border: 1px solid #e7e7e7;
        }
        .span_absolute{
            position: absolute;
            width: 300px;
            height: 35px;
            top: 160px;
            left: 0;
            border: 1px solid #974F4F;
        }
        span.float{
            float: left;
            width: 300px;
            height: 35px;
            padding: 20px;
            margin: 70px;
            border: 1px solid #e7e7e7;
        }
    </style>
</head>
<body>
  <!--   <div id="boxa">
        <div class="relative" style="position: relative">
            <span class="span_relative">relative的span标签,display值为inline，不能设置宽高,<br>可以设置水平padding和margin,垂直的padding虽然没有用，但是还是影响了整体大小，但是又没有占据的空间还是原来的</span>
            <span>正常的span标签，紧跟在其后</span>
            <span class="float">float的span标签,display值为block</span><br>
            <span class="span_absolute">absolute的span标签,display值为block</span>
        </div>
    </div>
    <div id="boxb">
        <div class="absolute">

        </div>
    </div> -->
    <div id="boxc" style="text-align: center;height: 60px;">
        <div class="inline_block" style="display:inline-block;width:600px;line-height: 60px;">
                测试文本（父盒子text-align: center，自身display:inline-block，就会水平居中)
        </div>
    </div>
    <div class="box_fx" style="width: 60px;height: 60px;display: none;">display: none;</div>
    <div class="box_fx" style="width: 60px;height: 60px;opacity: 0;">opacity: 0;</div>
    <div class="box_fx" style="width: 60px;height: 60px;visibility: hidden;">visibility: hidden;</div>
    <div class="box_fx" style="width: 60px;height: 60px;text-indent: -2000px;">text-indent: 2000px;</div>
    <script type="text/javascript" src="./jquery.js"></script>
    <script>
        $(".box_fx").on("click",function(e){
            console.log(e)
        })
    </script>
</body>
</html>